<template>
  <select class="select select-bordered" v-model="value">
    <slot>
      <option v-for="(label, val) in computedOptions" :key="val" :value="val">
        {{ label }}
      </option>
    </slot>
  </select>
</template>
<script setup lang="ts" generic="T">
import { useVModel } from "@vueuse/core";
interface Props {
  modelValue: T;
  options?: Array<T> | Record<string, T>;
}
const props = defineProps<Props>();
const emit = defineEmits<{
  "update:modelValue": [val: string];
}>();
const value = useVModel(props, "modelValue", emit);
// 通过计算属性统一 options 的格式
const computedOptions = computed(() => {
  if (Array.isArray(props.options))
    return Object.fromEntries(props.options.map((i) => [i, i]));
  return props.options;
});
</script>
